<template>
    <div class="partner-company">
        <div class="partner-contain">
            <h3 class="part-title">合作机构</h3>
            <div class="part-group">
                <ul class="part-item">
                    <li v-for="(part,index) in partObj" :key="index">
                        <div class="imgWrap">

                            <a target="_blank" @click="$store.dispatch('invalidBtnAlertAction')"
                               href="javascript:;">

                                <img alt="" :src="part.url">

                            </a>

                        </div>
                        <div class="title">
                            <a target="_blank" class="title-wrap" @click="$store.dispatch('invalidBtnAlertAction')"
                               href="javascript:;">
                                {{part.name}}
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PartnerCompany",
        data() {
            return {
                partObj: [
                    {url: "https://img.alicdn.com/tfs/TB1sIvmxYPpK1RjSZFFXXa5PpXa-228-58.jpg", name: "匡时拍卖"},
                    {url: "https://img.alicdn.com/tfs/TB1ckbFx4jaK1RjSZFAXXbdLFXa-228-58.jpg", name: "荣宝斋（上海）"},
                    {url: "https://img.alicdn.com/tfs/TB1xRGjSAPoK1RjSZKbXXX1IXXa-228-58.jpg", name: "艺术北京"},
                    {url: "https://img.alicdn.com/tfs/TB1Dfzqx4TpK1RjSZFGXXcHqFXa-228-58.jpg", name: "上海泓盛拍卖"},
                    {url: "https://img.alicdn.com/tfs/TB1DU_Cx4YaK1RjSZFnXXa80pXa-228-58.jpg", name: "百联文化"},
                    {url: "https://img.alicdn.com/tfs/TB1tHHxx3HqK1RjSZFkXXX.WFXa-228-58.jpg", name: "墨华斋"},
                    {url: "https://img.alicdn.com/tfs/TB1HE_Cx4YaK1RjSZFnXXa80pXa-228-58.jpg", name: "搜猎人拍卖"},
                    {url: "https://img.alicdn.com/tfs/TB16Xvox9zqK1RjSZFLXXcn2XXa-228-58.jpg", name: "三为文化"},
                    {url: "https://gw.alicdn.com/tfs/TB1Mvz0bbr1gK0jSZFDXXb9yVXa-228-58.jpg", name: "正向阳光"},
                    {url: "https://gw.alicdn.com/tfs/TB1M628blv0gK0jSZKbXXbK2FXa-228-58.jpg", name: "博纳斯"},
                    {url: "https://gw.alicdn.com/tfs/TB1PVY8blr0gK0jSZFnXXbRRXXa-228-58.jpg", name: "当代名家书画院"},
                    {url: "https://gw.alicdn.com/tfs/TB1zgDIdkH0gK0jSZPiXXavapXa-228-58.png", name: "中侨佳信"},
                    {url: "https://gw.alicdn.com/tfs/TB1ZvSBcuL2gK0jSZPhXXahvXXa-228-58.jpg", name: "墨泽文化"},
                    {url: "https://gw.alicdn.com/tfs/TB1Il3abmf2gK0jSZFPXXXsopXa-228-58.jpg", name: "博悦艺术收藏"},
                    {url: "https://gw.alicdn.com/tfs/TB1ClnZbmf2gK0jSZFPXXXsopXa-228-58.jpg", name: "南方钱币总站"},
                    {url: "https://gw.alicdn.com/tfs/TB1bfz4bXY7gK0jSZKzXXaikpXa-228-58.jpg", name: "嘉盛堂艺趣"},
                    {url: "https://gw.alicdn.com/tfs/TB1KED3bhD1gK0jSZFKXXcJrVXa-228-58.jpg", name: "东联盛世宝国际拍卖"},
                    {url: "https://gw.alicdn.com/tfs/TB1yPTZbfb2gK0jSZK9XXaEgFXa-228-58.jpg", name: "北京富古台拍卖"},
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
    * {
        font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    }

    .partner-company {
        width: 100%;
        height: 320px;

        a {
            text-decoration: none;
        }

        .partner-contain {
            width: 1200px;
            margin: auto;

            /*标题*/

            h3.part-title {
                font-weight: 900;
                display: block;
                height: 44px;
                text-align: center;
                line-height: 44px;
                user-select: none;
                font-size: 24px;
            }

            .part-group {
                ul.part-item {
                    li {
                        float: left;
                        display: inline;
                        margin-right: 12px;
                        width: 188px;
                        height: 86px;

                        .imgWrap {
                            width: 180px;
                            border: 1px solid #e3e3e3;
                            background-color: #fff;
                            padding: 4px 3px;

                            img {
                                background: url(//gtms02.alicdn.com/tps/i2/TB1UXltGXXXXXXhXpXXpJArGXXX-34-34.gif) center center no-repeat #f6f6f6;
                                vertical-align: middle;
                                width: 180px;
                            }

                        }

                        .imgWrap:hover {
                            background-color: rgb(220, 38, 37);
                        }

                        .title {
                            text-align: center;
                            line-height: 30px;
                            height: 30px;
                            font-size: 12px;

                            a {
                                color: #5d5d5d;
                            }

                            a:hover {
                                color: rgb(128, 0, 25);
                            }
                        }
                    }
                }

            }

        }
    }
</style>